<template>
	<view class="page">
		<navbar title="最终排行" />
		<!-- <view class="title">联机模式</view> -->
		<view class="rank">
			<view class="rank-bg">
				<view class="rank-title">
					<view class="rt1">排名</view>
					<view class="rt2">选手信息</view>
					<view class="rt3">获得积分</view>
				</view>
				<view class="rank-item" v-for="(item, index) in list" :key="index">
					<view class="index" :class="index === 0 ? 'index0' : ''">{{ index + 1 }}</view>
					<view class="rank-main">
						<view style="width: 100%;
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
							margin-bottom: 10px;
							position: relative;">
							<image class="avatar" src="../../../static/image/fjj/avatar.png"></image>
							<view class="con">
								<view class="username">
									{{ item.user_group_info.username }}
								</view>
								<view class="user-score">
									分数：{{ item.sqpp_point }}
								</view>
							</view>
							<view class="score">
								+{{ item.point }}
							</view>
						</view>
						<view class="content-back">
							<view class="zmjl-line">
								<view class="xuhao">序号</view>
								<view class="zimu-view">选手答案</view>
								<view class="zimu-view">正确答案</view>
								<view class="zimu-view">结果</view>
							</view>
							<view class="zmjl-line" v-for="(childItem, j) in item.list" :key="j">
								<view class="xuhao"><view class="num-view">{{ childItem.round }}</view></view>
								<view class="zimu-view zimu-view1">{{ childItem.answer }}</view>
								<view class="zimu-view zimu-view1">{{ childItem.word }}</view>
								<view class="zimu-view">
									<image v-if="childItem.ok_status" class="result" src="../../../static/image/answer-right.png" mode=""></image>
									<image v-else class="result" src="../../../static/image/answer-error.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="" style="display: flex;flex-direction: row; justify-content: center;">
			<!-- #ifdef APP-PLUS -->
			<view class="btn" @click="fnBack('app')">返回</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="btn" @click="fnBack('h5')">返回</view>
			<!-- #endif -->
		</view>

	</view>
</template>

<script>
import navbar from '../../../components/gamesNav.vue'
export default {
	config: {
		disableScroll: true
	},
	components: {
		navbar
	},
	data() {
		return {
			game_mode: '',
			group_id: '',
			list: []
		};
	},
	onLoad(options) {
		var that = this;
		that.group_id = options.group_id;
		that.game_mode = options.game_mode;

		that.getRankDetail();
	},
	mounted() {

		const that = this

		that.$eventBus.$emit('callMethodIn_background_type', {
			type: 'rank'
		})
	},
	onShow() {
		const that = this
		that.$eventBus.$emit('callMethodIn_background_type', {
			type: 'rank'
		})
	},
	methods: {
		fnBack(type) {
			var that = this;
			console.log('type===', type)
			if (type == 'app') {
				uni.navigateBack({
					delta: 1
				});
			}
			if (type == 'h5') {
				uni.navigateBack({
					delta: 1
				});
			}
		},

		// 获取排行榜列表1
		getRankDetail() {
			var that = this;
			that.$http.getRankList({
				'group_id': that.group_id,
				'game_mode': that.game_mode
			}).then(res => {
				if (res.code === 200) {
					that.list = res.data
					that.list.forEach(item => {
						item.list.forEach(child => {
							child.answer = child.answer.split('').join(',')
						})
					})
					console.log(that.list)
				} else {
					uni.showToast({
						title: res.msg,
						icon: '',
						duration: 2000
					})
				}
			})
		},
	}
}
</script>

<style lang="less">
.page {
	height: 100vh;
	background: #161001;
	overflow-y: auto;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.title {
	font-family: hzgb;
	font-size: 18px;
	color: #fff;
	background: linear-gradient(to bottom, #000, #373632);
	text-align: center;
	height: 44px;
	line-height: 44px;
}

.rank {
	background: linear-gradient(to right, #fff497, #ffd16b);
	border-radius: 16px;
	margin: 24px 12px;
}

.rank-bg {
	background-image: url(../../../static/image/homePage/diwen1.png);
	background-size: 100% auto;
	background-repeat: repeat-y;
	border-radius: 16px;
	padding: 0 20px;
}

.rank-title {
	display: flex;
	align-items: center;
	// justify-content: space-between;
	font-size: 14px;
	font-family: hzgb;
	height: 32px;

	// padding: 0 12px;
	.rt1 {
		width: 48px;
		text-align: center;
	}

	.rt2 {
		flex: 1;
		padding-left: 20px;
	}

	.rt3 {
		width: 60px;
		text-align: center;
	}
}

.rank-item {
	padding: 10px 0;
	border-top: 2px solid #000;
	display: flex;
	align-items: flex-start;

	.index {
		width: 56px;
		height: 56px;
		flex-shrink: 0;
		background-image: url(../../../static/image/fjj/rank.png);
		background-size: contain;
		font-size: 34px;
		font-family: hzgb;
		color: #fff;
		text-align: center;
		line-height: 48px;
	}

	.index0 {
		background-image: url(../../../static/image/fjj/rank1.png);
		color: #ffd16b;
	}

	.score {
		position: absolute;
		width: 60px;
		text-align: center;
		font-size: 24px;
		font-family: hzgb;
		right: 0;
	}
}

.rank-main {
	flex: 1;
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-left: 20px;

	.content-back {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		.zmjl-line {
			width: 100%;
			display: flex;
			height: 40px;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			position: relative;
			border-bottom: 1px solid #000;
			&:last-child{
				border-bottom: none;
			}

			.num-view {
				width: 22px;
				height: 22px;
				margin-right: 5px;
				border-radius: 11px;
				background: #000;
				color: white;
				line-height: 22px;
				text-align: center;
				font-size: 16px;
				font-weight: 800;
				flex-shrink: 0;
			}

			.zimu-view {
				flex: 1;
				font-size: 14px;
				color: #000;
				text-align: center;
			}
			.zimu-view1{
				font-size: 16px;
				font-weight: 900;
			}
			.xuhao{
				font-size: 14px;
				color: #000;
				width: 40px;
				text-align: left;
			}
		}

		.ans-line {
			position: absolute;
			width: 100%;
			height: 1px;
			background: black;
			top: 0;
		}
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 56px;
		margin-right: 10px;
	}

	.username {
		color: #000;
		font-size: 18px;
		font-family: hzgb;
		margin-bottom: 4px;
	}

	.num {
		width: 110px;
		background: linear-gradient(to bottom, #130e00, #373632);
		height: 24px;
		line-height: 24px;
		border-radius: 24px;
		text-align: center;
		color: #fff;
		font-size: 14px;
		margin-top: 6px;
	}
}

.btn {
	width: 130px;
	height: 40px;
	line-height: 40px;
	box-shadow: 0 6px 0 0 #d9b059;
	background: linear-gradient(to top, #fff497, #ffd16b);
	border-radius: 40px;
	margin: 40px auto;
	text-align: center;
	font-family: hzgb;
	font-size: 16px;
}

.btns {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.user-score{
	font-size: 14px;
	color: #fff;
	background: linear-gradient(to bottom, #130e00, #373632);
	height: 22px;
	line-height: 22px;
	border-radius: 22px;
	width: 100px;
	text-align: center;
	margin-top: 4px;
}
.result {
	width: 22px;
	height: 22px;
	margin-top: 6px;
}
</style>